<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<title>SISYPHUSER</title>
		<link href="favicon-32x32-next.png" rel="shortcut icon" /> 
		<link rel="stylesheet" type="text/css" href="base.css"/>

		<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
		<script src="jquery.touchSwipe.min.js"></script>
		<script src="jquery.mousewheel.min.js"></script>
		

		<script type="text/javascript">


			var canscroll = true;//用来限制滚动频率
			$(document).ready(function() {
		

				var now_page=0;
				var page_length=$(".page").length;
				/***滚动鼠标**/
				$(document).mousewheel(function(event,delta){
					if (canscroll) {
						console.log("in");
						//限制滚动
						 var direction=event.deltaY;
						 //向下滚动
						 if(direction<0)   
						 {
						 	if(now_page<page_length-1)
						 	{
								canscroll = false;
							 	now_page++;
							 	$(".container").animate({"top":now_page*-100+"%"},600,function(){canscroll = true;});
							 	
							 }
						 }else 
						 {
						 	if(now_page>0)
						 	{
						 		canscroll = false;
						 		now_page--;
						 		$(".container").animate({"top":now_page*-100+"%"},600,function(){canscroll = true;});
							 	
						 	}
						 }
												 
					};
				})

				$(".container").swipe(
					{
						swipe:function(event,direction,distance,duration,fingerCount){
							if(direction=="up"){
								now_page++;
							}else if(direction=="down"){
								now_page--;
							}
							if(now_page<0){
								now_page=0;
							}
							if(now_page>page_length-1){
								now_page=page_length-1;
							}
							$(".container").animate({"top":now_page*-100+"%"},600);
						
						}
					}
				);

				$("img.next").click(
					function(){
						now_page++;
						$(".container").animate({"top":now_page*-100+"%"},600);
					}
				);

				$(".sate").css("width",$("div.container").width())

				$(window).resize(function() {
					$(".sate").css("width",$("div.container").width())
				});

			});

		</script>
	</head>

	<body onmousewheel="return false;" >
		<div class="container" style="top: 0%;" >
			<div class="page">
				<CENTER>
					<p class="sate"/>
					<img class="pic" src="image/180717rush.png"/>
					<p class="content">Happiness is the enemy.<br/>It weakens you.<br/>Puts doubt in your mind.<br/>Suddenly,you have something to lose.</p>
					<p class="note">
						<a class="note" href="https://movie.douban.com/subject/6803494/" target="_blank">
							《Rush》
						</a>
					</p>
					<p class="time">7.17</p>
				</CENTER>
				<img class="next" src="next.png" >
			</div>
			<div class="page">
				<CENTER>
					<p class="sate"/>
					<p class="nopic">那一天我二十一岁，在我一生的黄金时代，我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。</p>
					<p class="note">
						<a class="note" href="https://book.douban.com/subject/1082406/" target="_blank">《黄金时代》</a>
					</p>
					<p class="time">7.13</p>
				</CENTER>
			</div>
		
		</div>
	</body>

</html>
